<template>
	<view>
		<uNavbar title="活动中心" leftIconColor="#333"></uNavbar>
		<!-- 轮播 -->
		<view class="brand_island_a">
			<swiper class="swiper_a" keyName="image_path" circular interval="3000" duration="500" previous-margin="10px"
				next-margin="20px">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper_box_a flex_c" @click="changeUrl(item.url)">
						<image :src="item.image_path" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="metal flex_ld">
			<view class="metal_box  shop1 flex_Z" data-url="/pagesMy/activityCenter/pullNewList" @click="allJump">
				<text>精彩活动</text>
				<view class="metal_d  flex_ld">
					<text>参加活动得好礼</text>
				</view>
				<image :src="market_images" mode=""></image>
			</view>
			<view class="metal_box  shop1 flex_Z" data-url="/pagesMy/fightingCenter/userRanking" @click="allJump">
				<text>风云榜</text>
				<view class="metal_d  flex_ld">
					<text>榜单前五十每周拿奖励</text>
				</view>
				<image :src="power_ranking_images" mode=""></image>
			</view>
			<view class="metal_box shop2 flex_Z" data-url="/pagesMy/secretRealm/secretRealmIndex" @click="allJump">
				<text>探索遗迹</text>
				<view class="metal_d  flex_ld">
					<text>跨越时空之旅</text>
				</view>
				<image :src="heritage_exploration_images" mode=""></image>
			</view>
			<view class="metal_box  shop4 flex_Z" data-url="/pagesMy/activityCenter/activityZone" @click="allJump">
				<text>小福竞猜</text>
				<view class="metal_d  flex_ld">
					<text>参与活动领多重豪礼</text>
				</view>
				<image :src="activity" mode="aspectFill"></image>
			</view>
			<view class="metal_box shop3 flex_Z" data-url="/pagesMy/debris/debrislist" @click="allJump">
				<text>合成专区</text>
				<view class="metal_d  flex_ld">
					<text>领取丰厚奖励</text>
				</view>
				<image :src="fragment_image" mode=""></image>
			</view>
<!-- 			<view class="metal_box shop3 flex_Z" data-url="/pagesMy/activityCenter/contributionList" @click="allJump">
				<text>七日孵化</text>
				<view class="metal_d  flex_ld">
					<text>买孵化送DAO贡献</text>
				</view>
				<image :src="school_images" mode=""></image>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import {sliderList} from "../../api/store.js";
	import {shopGoods,shopGoodsConfig} from "../../api/shopp.js";
	import {
		agreementImages
	} from "../../api/other.js"
	export default {
		data() {
			return {
				search: '',
				shopTips: '',
				bannerList: [], //轮播图
				productList: [],
				dynasty_images: "",
				heritage_exploration_images: "",
				market_images: "",
				school_images: "",
				power_ranking_images: '',
				activity: "",
				fragment_image: ""
			}
		},
		onLoad() {
			this.initIndex()
			this.getimagelist()
		},
		methods: {
			getimagelist() {
				agreementImages().then(res => {
					this.dynasty_images = res.data.dynasty_images
					this.heritage_exploration_images = res.data.heritage_exploration_images
					this.market_images = res.data.market_images
					this.school_images = res.data.school_images
					this.power_ranking_images = res.data.power_ranking_images
					this.treasureBox = res.data.box
					this.activity = res.data.activity
					this.fragment_image = res.data.fragment_image
					console.log(res)
				})
			},

			// 统一跳转
			allJump(e) {
				let {url} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},

			// 轮播、列表 集成接口
			initIndex() {
				let data = {
					type: 5
				}
				sliderList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.bannerList = res.data
					}
				})
			},
			// 跳转页面
			changeUrl(url) {
				console.log(url);
				// 截取路径
				var domain = url.indexOf('fulezhenxuan');
				if (domain != -1) {
					var path = url.split('#');
					console.log('1111', path[1])
					let urls = path[1]
					uni.navigateTo({
						url: urls
					})
				}
			},

		},
		//触底加载

	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		background: #ffffff;
		margin: 30rpx auto;
		border-radius: 40rpx;
	}

	.search>image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 40rpx 0 26rpx;
	}

	.search::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 80rpx;
		transform: translateX(-50%);
		height: 36rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.search>input {
		color: #666666;
		font-size: 28rpx;
	}

	.brand_island_a {
		width: 100%;
		height: 308rpx;
		margin-top: 30rpx;
		margin: 0 auto;
		// transform: translateY(-70rpx);
	}

	.swiper_a {
		width: 750rpx;
		height: 306rpx;
	}

	.swiper_box_a {
		position: relative;
		width: 670rpx;
		height: 310rpx;
		text-align: center;
		background: #00000025;
		border-radius: 30rpx;
		margin: 0 20rpx;
	}

	.swiper_box_a>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		border-radius: 30rpx;
	}

	.tips {
		width: 92%;
		font-size: 30rpx;
		background: #F2F2F2;
		color: #A68A64;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		margin: 0 auto;
	}

	.noticeBar {
		position: relative;
		width: 100%;
		margin-top: 30rpx;
	}
	.hdcenter{
		width: 690rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 46rpx;
	}
	.hdcenter>image{
		width: 690rpx;
		height: 88rpx;
	}
	.metal {
		width: 92%;
		// margin: 30rpx auto;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.metal_box {
		width: 690rpx;
		height: 132rpx;
		background: #ffffff;
		border-radius: 16rpx;
		justify-content: space-evenly;
		position: relative;
		margin-top: 20rpx;
		>image{
			position: absolute;
			width: 102rpx;
			height: 102rpx;
			top: 18rpx;
			left: 18rpx;
		}
	}

	.metal_box>text {
		font-size: 32rpx;
		color: #3D3D3D;
		margin-left: 136rpx;
		font-weight: 700;
	}
	
	.metal_d {
		// padding: 0 30rpx;
	}

	.metal_d>text {
		margin-left: 136rpx;
		font-size: 28rpx;
		color: #858585;
	}

	.shop1 {
		background: url(../../static/image/hd1.png);
		background-size: 100% 100%;
	}

	.shop2 {
		background: url(../../static/image/hd2.png);
		background-size: 100% 100%;
	}
	.shop3 {
		background: url(../../static/image/hd3.png);
		background-size: 100% 100%;
	}
	
	.shop4 {
		background: url(../../static/image/hd4.png);
		background-size: 100% 100%;
	}

	.shopp {
		width: 92%;
		margin: 50rpx auto 30rpx;
		/* background: pink; */
	}

	.regional {
		position: relative;
		font-family: iconfont2;
		font-size: 44rpx;
		color: #262626;
	}

	.regional_name {
		z-index: 8;
	}

	.regional_name_a {
		z-index: 8;
	}

	.bg_circular {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.bg_circular_a {
		position: absolute;
		top: -18rpx;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		z-index: 2;
		background: linear-gradient(180deg, #BA9B7090, #BA9B7050);
	}

	.commodity_box {
		width: 92%;
		margin: 50rpx auto 30rpx;
		position: relative;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 50rpx;
	}

	.commodity {
		z-index: 9;
	}

	.commodity_sell {
		position: relative;
		width: 330rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 12rpx 0;
		padding-bottom: 20rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 330rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		font-size: 32rpx;
		color: #3D3D3D;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.money_a {
		color: #3D3D3D;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 10rpx;
	}

	.money_a>image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.sign_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 10rpx;
	}

	// /deep/.u-icon__icon {
	// 	color: #BA9B70 !important;
	// }

	/deep/.u-notice-bar {
		background: #BA9B7020 !important;
	}
</style>